<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
</head>

<body>

</body>

</html>

<script>
  const clock = new THREE.Clock()
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(0, 50, 200);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0x000000);
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(2000, 8000, 4000);
  scene.add(spotLight);

  // canvas 贴图实现圆形
  function getSprite () {
    const canvas = document.createElement('canvas')
    const size = 8
    canvas.width = size * 2
    canvas.height = size * 2

    const ctx = canvas.getContext('2d')
    
    ctx.fillStyle = '#00ff00'
    ctx.arc(size, size, size / 1.5, 0, Math.PI * 2)
    ctx.fill()

    const texture = new THREE.Texture(canvas)
    texture.needsUpdate = true
    return texture
  }

  const spriteList = []
  // 创建一个基础的粒子
  const total = 20
  function createNormalSprite() {
    const material = new THREE.SpriteMaterial({
      color: 0x008800,
      map: getSprite()
    })
    for (let i = -total; i < total; i++) {
      for (let j = -total; j < total; j++) {
        const sprite = new THREE.Sprite(material)
        sprite.position.set(i * 10, 0, j * 10);
        spriteList.push(sprite)
        scene.add(sprite)
      }
    }
  }

  createNormalSprite()

  // 变化的速度
  const speed = 0.1
  // 波浪的高度
  const height = 5
  // 波浪的振幅
  const step = 0.3

  let status = 0;

  const animation = () => {
    // 渲染
    renderer.render(scene, camera);

    requestAnimationFrame(animation);

    let index = -1
    for (let x = 0; x < total * 2; x++) {
      for (let y = 0; y < total * 2; y++) {
        index++

        spriteList[index].position.y = (Math.sin(x + status) * step) * height + (Math.sin(y + status) * step) * height
      
        // 缩放系数
        const scaleValue = (Math.sin(x + status) * step) + 1
        spriteList[index].scale.set(scaleValue, scaleValue, scaleValue)
      }
    }

    status += speed
  }
  animation()
</script>